<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>提问</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/nav2.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/profile.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/profile-follow-tab.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/css/mask.css}">

    <style>
        .comments {
            width: 100%; /*自动适应父布局宽度*/
            overflow: auto;
            word-break: break-all;
            height: 150px;
            /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，
            当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/
        }
    </style>


</head>
<body>
<div class="nav">
    <div class="wrap">
        <a href="/" class="logo">问答</a>
        <ul class="nav-top">
            <li><a href="">首页</a></li>
            <li><a href="explore">发现</a></li>
            <li><a href="topics">话题</a></li>
        </ul>
        <div class="search-area">
            <form th:action="@{/listTopicByTopicName}" action="post">
                <input type="text" name="topicName" placeholder="搜索你感兴趣的内容...">
                <button class="magnifier" type="submit"></button>
                <button class="ask ask-question open-mask" type="button">提问</button>
                <!--                <button th:formaction="questionAdd" class="ask">提问</button>-->
            </form>


        </div>
        <div class="nav-right">
            <a href="message" class="message"></a>
            <a href="" class="profile"><img class="profile-avatar" src="image/avatar6.jpg"></a>
        </div>
    </div>
</div>

<div class="profile-wrap">
    <div class="profile-header">
        <div class="profile-bgc">
            <img src="image/user-cover.jpg">
        </div>
        <div class="profile-info">
            <div class="profile-avatar">
                <img src="image/avatar6.jpg">
            </div>

            <div class="two-button" id="isSelf" data-id="true">
                <a href="setting" class="follow-button">编辑信息</a>
            </div>

            <div class="info-title">
                <span>fanchao</span>
                <span>无</span>
            </div>
            <div class="info-item">
                <span class="item-key">居住地</span>
                <div class="item-value">河北</div>
            </div>
            <div class="info-item">
                <span class="item-key">所在行业</span>
                <div class="item-value">河北</div>
            </div>
            <div class="info-item">
                <span class="item-key">职业经历</span>
                <div class="item-value">哈哈</div>
            </div>
            <div class="info-item">
                <span class="item-key">教育背景</span>
                <div class="item-value">河北经贸</div>
            </div>
            <div class="info-item">
                <span class="item-key">个人简介</span>
                <div class="item-value">无</div>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="content" id="content">
            <ul class="tab-header">
                <li><a href="profile/3" id="tab-header-answer">回答</a></li>
                <li><a href="profileQuestion/3" id="tab-header-question" class="tab-header-active">提问</a></li>
                <li><a href="profileCollection/3" id="tab-header-collection">收藏</a></li>
                <li><a href="profileFollowPeople/3" id="tab-header-follow">关注</a></li>
            </ul>


            <div class="question-tab">
                <div class="tab-title">
                    <h3>他的提问</h3>
                </div>

                <div class="question-list">
                    <ul>
                        <li th:each="q:${questionList}">
                            <h3 class="question-title">
                                <a th:href="@{/questionDetail(id=${q.id})}" th:text="${q.title}">Spring，Django，Rails，Express这些框架技术的出现都是为了解决什么问题，现在这些框架都应用在哪些方面？</a>
                            </h3>
                            <div class="question-meta">
                                <span th:text="${#dates.format(q.createDate,'yyyy-MM-dd')}"></span><span
                                    class="dot-split">.</span>
                                <span th:text="${q.answerCount}"></span><span>个回答</span><span class="dot-split">.</span>
                                <span th:text="${q.followCount}"></span><span>个关注</span>
                            </div>
                            <!--                            <span><a class="open-mask" type="button" th:value="${q.id}">编辑</a></span>-->
                            <span><a th:href="@{/questionEdit(id=${q.id})}">编辑</a></span>
                            <span><a th:href="@{/questionMark(id=${q.id})}">标记删除</a></span>
                        </li>
                    </ul>

                    <div class="pagination">
                        <div class="buttons">
                            <a class="pre-page" href="profileQuestion/3?page=1">首页</a>
                            <!-- 上一页处理 -->
                            <span>上一页</span>

                            <!-- 中间页码 -->
                            <a href="profileQuestion/3?page=1">1</a>
                            <a href="profileQuestion/3?page=2">2</a>
                            <a href="profileQuestion/3?page=3">3</a>
                            <a href="profileQuestion/3?page=4">4</a>
                            <a href="profileQuestion/3?page=5">5</a>

                            <!-- 下一页处理 -->
                            <a class="next-page" href="profileQuestion/3?page=2">下一页</a>
                            <a class="next-page" href="profileQuestion/3?page=5">尾页</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="sidebar">
            <div class="profile-achieve">
                <h3>个人成就</h3>
                <div class="achieve-info">
                    <p><i class="sprite-thumb"></i>&nbsp;&nbsp;&nbsp;获得<span> 2 </span>次赞同</p>
                    <p>获得<span> 4 </span>次收藏</p>
                </div>
            </div>

            <div class="follow-info">
                <div class="follow-people">
                    <div class="wrap">
                        <h4>
                            <p>关注了</p>
                            <p>0</p>
                        </h4>
                        <h4>
                            <p>关注者</p>
                            <p>0</p>
                        </h4>
                    </div>
                </div>

                <div class="follow-other" id="follow-other">
                    <ul>
                        <li>
                            <a id="sidebar-following-topic" href="profileFollowTopic/3">
                                <span>关注的话题</span>
                                <span>0</span>
                            </a>
                        </li>
                        <li>
                            <a id="sidebar-following-question" href="profileFollowQuestion/3">
                                <span>关注的问题</span>
                                <span>0</span>
                            </a>
                        </li>
                        <li>
                            <a id="sidebar-following-collection" href="profileFollowCollection/3">
                                <span>关注的收藏夹</span>
                                <span>0</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer">
                <a href="#">建议反馈</a>
                <span> • </span>
                <a href="#">联系我们</a>
                <div></div>
                <span>@ 2022 虾乎</span>
            </div>
        </div>


    </div>
</div>
<div class="mask"></div>
<div class="upon-mask" id="ask-modal">
    <h3>
        <span>提问</span>
        <span class="close-mask">×</span>
    </h3>
    <form id="askForm" th:action="@{/questionSave}" method="post">
        <input id="questionTitle" type="text" name="title" placeholder="写下你的问题">
        <div>问题描述（可无）：</div>
        <!--        <textarea name="content" id="questionContent" style="height: 150px;weight: 300px;"></textarea>-->
        <textarea name="description" class="comments"></textarea>
        <!--        <textarea name="answer" ></textarea>-->
        <button id="askButton">发布</button>
    </form>
</div>
<p class="a">测试</p>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/profile.js"></script>
<script type="text/javascript" src="js/mask.js"></script>
</body>
</html>